<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>加载第三方矢量切片-加载线</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.css" rel="stylesheet" />

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id='map'></div>
<script>
    // mapboxgl.accessToken = 'your accessToken';
    mapboxgl.accessToken ='pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tyZWN3amRmMXlvNjJwcDhjMmp2dmNhdSJ9.tXwGurJrDL8trPienpr-bg';
    var mapStyle = {
        "version": 8,
        "sources": {
            "composite": {
                "url": "mapbox://mapbox.mapbox-streets-v8",
                "type": "vector"
            },
            "os": {
                "type": "vector",
                "scheme": "tms",
                "tiles": [  "http://210.72.227.199:18084/geoserver/gwc/service/tms/1.0.0/qgc%3AGNQ@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"]
                // "tiles": [  "http://210.72.227.199:18084/geoserver/gwc/service/tms/1.0.0/qgc%3AGNQ@EPSG%3A3857@pbf/{z}/{x}/{y}.pbf"]
                // "tiles": [  "http://210.72.227.199:18084/geoserver/gwc/service/tms/1.0.0/qgc%3AGNQ@EPSG%3A3857@pbf/{z}/{x}/{y}.pbf"]
                // "tiles": [  "http://210.72.227.199:18084/geoserver/gwc/service/tms/1.0.0/qgc%3AstationEra1117@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"]
                // "tiles": [  "http://210.72.227.199:18084/geoserver/gwc/service/tms/1.0.0/qgc%3AstationEra1117@EPSG%3A3857@pbf/{z}/{x}/{y}.pbf"]
                // "tiles": [  "http://210.72.227.199:18084/geoserver/gwc/service/tms/1.0.0/qgc%3Adesert@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"]
            },
        },
        "sprite": "mapbox://sprites/mapbox/streets-v8",
        "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        "layers": [{
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#ffffff"
            },
            "interactive": true
        },
            {
                // "id": "hydro",
                // "id": "desert",
                "id": "GNQ",
                // "id": "stationEra1117",
                "type": "line",
                // "type": "line",
                "source": "os",
                "source-layer": "GNQ",
                // "source-layer": "stationEra1117",
                // "source-layer": "desert",
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#3031ff",
                    "line-width": 1,
                    "line-dasharray": [1.5, 3]
                }
            },
        ]
    };

    var map = new mapboxgl.Map({
        container: 'map',
        style: mapStyle,
        zoom: 3,
        center: [112.08, 27.54]
    });
</script>

</body>

</html>
